<template>
  <section>
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods/stockCheckoutList'}">商品出库</el-breadcrumb-item>
        <el-breadcrumb-item>销售出库记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end  面包屑-->
    <!--start content-->
    <div class="content" ref="content">
      <div class="checkIn-header">
        <span>仓库：{{stockCheckOutData.warehouseName}}</span>
        <span>单号：{{stockCheckOutData.checkoutCode}}</span>
        <span>出库日期：{{stockCheckOutData.checkoutDate}}</span>
        <span>制单人：{{stockCheckOutData.createOpName}}</span>
      </div>
      <div class="checkIn-box">
        <table class="checkIn-table" border="0" cellpadding="0" cellspacing="0"  width="100%">
          <col width="4%"/>
          <col width="12%"/>
          <col width="40%"/>
          <col width="14%"/>
          <col width="7%"/>
          <col width="8%"/>
          <col width="14%"/>
          <tr class="checkIn-table-th">
            <td>序号</td>
            <td>编码</td>
            <td>商品</td>
            <td>规格</td>
            <td>单位</td>
            <td>出库数量</td>
            <td>备注</td>
          </tr>
          <tr class="checkIn-table-tr" v-for="(item,index) in stockCheckOutData.stockCheckoutGoodsDataList">
            <td>{{index+1}}</td>
            <td>{{item.goodsNo}}</td>
            <td>{{item.goodsName}}</td>
            <td>{{item.goodsSkuValue}}</td>
            <td>{{item.goodsNumUnit}}</td>
            <td>{{item.goodsCheckoutNum}}</td>
            <td>{{item.goodsRemark}}</td>
          </tr>
          <tr class="checkIn-table-total">
            <td></td>
            <td>合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{stockCheckOutData.goodsCheckoutSum}}</td>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="checkIn-foot">
        <p><span class="checkIn-label">备注：</span><span>{{stockCheckOutData.checkoutRemark}}</span></p>
        <p><span class="checkIn-label">经办人：</span><span>{{stockCheckOutData.transactOpName}}</span></p>
      </div>
    </div>
    <!--end content-->
  </section>
</template>
<script>
  export default{
    data(){
      return{
        checkoutCode:"",     //存储上个页面localStorage的checkoutCode
        stockCheckOutData:{},    //请求页面获取的初始数据
      }
    },
    methods:{
      queryInfo(){
        this.axios({
          method: 'GET',
          url: "/v3/stock/checkouts/"+this.checkoutCode,
          data:{}
        }).then((res) => {
          this.stockCheckOutData = res.data;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },
    },
    created(){
      this.checkoutCode = localStorage.getItem("checkoutCode");
      this.queryInfo();
    },
    mounted(){
      //动态设置高度
      this.$refs.content.style.height = (document.documentElement.clientHeight - 124)+"px";
    },
  }
</script>
<style scoped>

  .checkIn-label{
    white-space: nowrap;
    color: #788ea4;
  }

  .checkIn-foot p{
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }

  .checkIn-foot{
    margin-top: 20px;
  }

  .checkIn-table-total td{
    text-align: center;
    color: #576b7e;
    height: 38px;
    padding: 6px;
    line-height: inherit;
  }

  .checkIn-table-tr td{
    text-align: center;
    border-bottom:1px solid #e7e9f1;
    border-right:1px solid #e7e9f1;
    color: #576b7e;
    height: 38px;
    padding: 6px;
    line-height: inherit;
  }

  .checkIn-table-tr td:last-child{
    border-right:0px solid #e7e9f1;
  }

  .checkIn-table-th td{
    text-align: center;
    border-bottom:1px solid #e7e9f1;
    border-right:1px solid #e7e9f1;
    color: #576b7e;
    height: 38px;
    padding: 6px;
    background: #eef1f9;
    line-height: inherit;
    font-weight: bold;
    font-size: 13px;
  }

  .checkIn-table-th td:last-child{
    border-right:0px solid #e7e9f1;
  }

  .checkIn-table{
    border:1px solid #e7e9f1;
    border-right:1px solid #e7e9f1;
  }

  .checkIn-header span{
    margin-right: 30px;
    font-size: 13px;
  }

  .checkIn-header{
    padding: 0 0 15px 0;
    height: 20px;
    line-height: 20px;
  }
  /* start  面包屑 */
  .location {padding: 3px 0 15px 0;}
  /* end  面包屑 */
  /* start content */
  .content {position: relative;background: #fff;padding: 15px;overflow-y: auto;font-family: "微软雅黑";}
</style>
